
<template>
  <div class="my-banner">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.bannerId">
        <van-image class="img-show" :src="item.pic"><span class="type">{{ item.typeTitle }}</span></van-image>
      </van-swipe-item>

    </van-swipe>
  </div>
</template>
<script setup lang="ts">
import { getBannerList } from '@/api/banner'
import { ref, onMounted } from 'vue'
const bannerList = ref([])
onMounted(async () => {
  const res = await getBannerList()
  bannerList.value = res.banners
  console.log(bannerList.value);



})




</script>
  
<style scoped lang="scss">


    .type {
      width: 52px;
      position: absolute;
      box-sizing: border-box;
      border-radius: 2px;
      padding: 2px;
      font-size: .24rem;
      bottom: .3rem;
      right: .08rem;
      background-color: #fff;
    }


    .my-banner {
        width: 7.5rem;
        height: 3.24rem;
        position: relative;
        box-sizing: border-box;
        padding: .28rem;
        >.my-swipe {
            width: 100%;
            height: 100%;
            background-color: orange;
            border-radius: 10px;
            overflow: hidden;
        }
    }



</style>
  